<template>
  <div>

    <div>
      <el-dialog title="添加分类" :visible.sync="dialogVisible">
        <el-form :model="form">

          <el-form-item label="父id" :label-width="formLabelWidth">
            {{ form.parent }}
          </el-form-item>

          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>


          <el-form-item label="顺序" :label-width="formLabelWidth">
            <el-input v-model="form.sort" autocomplete="off"></el-input>
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible= false">取 消</el-button>
          <el-button type="primary" @click="saveCategory">确 定</el-button>
        </div>
      </el-dialog>
      <div style="display: flex">

        <div class="category-left">
          <p style="display: flex">
            <el-button type="info" icon="el-icon-refresh" size="mini"
                       @click="all()">刷新
            </el-button>
            <el-button type="info" size="mini"
                       @click="addCategory(1)">添加一级分类
            </el-button>
          </p>
          <el-table
              ref="level1Table"
              :data="level1"
              highlight-current-row
              @current-change="level1Click"
              style="width: 100%">
            <el-table-column
                prop="id"
                label="id"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="sort"
                label="顺序"
                width="180">
            </el-table-column>

            <el-table-column
                fixed="right"
                label="操作"
                width="100">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="category-right">
          <p style="display: flex">
            <el-button type="info" icon="el-icon-refresh" size="mini"
                       @click="all()">刷新
            </el-button>
            <el-button type="info" size="mini"
                       @click="addCategory(2)">添加二级分类
            </el-button>
          </p>
          <el-table
              :data="level2"
              style="width: 100%">
            <el-table-column
                prop="id"
                label="id"
                width="180">
            </el-table-column>
            <el-table-column
                prop="parent"
                label="父id"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="sort"
                label="顺序"
                width="180">
            </el-table-column>

            <el-table-column
                fixed="right"
                label="操作"
                width="100">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {allCategory, deleteCategory, saveCategory} from "@/network/category";
import {Confirm} from '@/assets/js/confirm'
import {Validator} from "@/assets/js/validator";

export default {
  name: "category",
  mounted() {
    this.all()
  },
  data() {

    return {
      options: [
        {
          value: 1,
          label: 1
        },
        {
          value: 5,
          label: 5
        },
        {
          value: 10,
          label: 10
        },
        {
          value: 50,
          label: 50
        },],
      dialogVisible: false,
      form: {},
      formLabelWidth: '120px',
      list: [],
      level1: [],
      level2: [],
      currentLevel1: null,
    }
  },
  methods: {
    all() {
      let _this = this;
      allCategory().then(res => {
        _this.list = res.data
        _this.level1 = [];
        _this.level2 = [];
        _this.currentLevel1 = null;

        for (let i = 0; i < _this.list.length; i++) {
          let c = _this.list[i];
          if (c.parent === '00000000') {
            _this.level1.push(c);
            c.children = [];
            for (let j = 0; j < _this.list.length; j++) {
              if (_this.list[j].parent == c.id) {
                c.children.push(_this.list[j]);
              }
            }
          }
        }
      })
    },
    saveCategory() {
      let _this = this;
      // 保存校验
      if (1 !== 1
          || !Validator.require(_this.form.parent, "父id")
          || !Validator.require(_this.form.name, "名称")
          || !Validator.length(_this.form.name, "名称", 1, 50)
      ) {
        return;
      }

      saveCategory(_this.form).then(res => {
        console.log(_this.form);
        _this.$message.success("保存成功");
        _this.form = {}
        _this.dialogVisible = false;
        _this.all()
      })
    },
    edit(row) {
      console.log(row);
      let _this = this;
      _this.form = Object.assign({}, row)
      _this.dialogVisible = true;
    },
    addCategory(level) {
      let _this = this;
      _this.form = Object.assign({}, {})
      if(level===1)
      {
        _this.form.parent="00000000";
      }
      else if(level===2 && _this.currentLevel1!==null)
      {
        _this.form.parent=_this.currentLevel1.id;
      }
      else
        return;
      _this.dialogVisible = true;
    },
    del(row) {
      let _this = this;
      Confirm.show('此操作将永久删除该文件, 是否继续?', function () {
        deleteCategory(row.id).then(res => {
          _this.all();
          _this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      })

    },
    level1Click(row) {
      let _this = this;
      _this.currentLevel1 = row
      _this.$refs.level1Table.setCurrentRow(row);
      _this.level2 = row.children;
    }
  }
}
</script>

<style scoped>
.category-left {
  width: 40%;
  margin: auto;
}

.category-right {
  margin: auto;
  width: 40%;
}
</style>
